<template>
  <div class="auth-container">
    <!-- 分割线 -->
    <el-divider content-position="center">其他登录方式</el-divider>

    <!-- 账号密码登录按钮 -->
    <el-button
      type="primary"
      class="login-btn"
      @click="handleAccountLogin"
    >
      账号密码登录
    </el-button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const handleAccountLogin = () => {
  router.push({ name: 'account-password' }).catch(err => {
    console.error('路由跳转失败:', err)
  })
}
</script>

<style lang="scss" scoped>
.auth-container {
  width: 300px;
  margin: 20px auto;

  .el-divider {
    margin: 30px 0;
    
    :deep(.el-divider__text) {
      font-size: 14px;
      color: var(--text-color-secondary);
      padding: 0 12px;
      background: var(--bg-color);
    }
  }

  .login-btn {
    width: 100%;
    height: 40px;
    font-size: 14px;
    border-radius: 4px;
  }
}
</style>